<template>
	<view class="container">
		<view class="user-section">
			<view class="rech_recode" @click="navToUrl('/pages/wallet/rechargelog')">充值记录</view>
			<view class="vip-card-box">
				<view class="money">{{ userinfo.money}}</view>
				<view class="text">可用余额(元)</view>
			</view>
		</view>
		
		<view class="tab-bar">
		 
			<view class="tab_item">
				 
				<view class="title">充值金额</view> 
				<view class="cu-form-group margin-lr-lg border-b-line padding-0" style="border-top:none;border-bottom:0.5px solid #eee;">
					<text class="text-price text-xxlx"></text>
					<input class="text-xxlx" data-key="coin" number focus placeholder="0.00" v-model="coin" @input="inputChange">
				</view>
				<!-- <view class="cu-form-group margin-lr-lg padding-0 submit_btn">
					<button :disabled="enableRecharge" class="cu-btn" type="button" @click="beginRecharge()">立即充值</button>
				</view> -->
			</view>
		</view>
		
		<view class="recharge">
			<button :disabled="enableRecharge" class="cu-btn" type="button" @click="beginRecharge()">确认充值</button>
		</view>
		<view class="footer-info">
			<view>充值规则如下：</view>
			<view>充值时间：</view>
		    <view>用户可以在周一至周日的{{begintime}}至{{endtime}}期间进行充值操作。</view>
			<view>充值金额：</view>
		    <view>单笔最低{{minrecharge}}元起，最高金额{{maxrecharge}}请根据支付方式选择充值金额。</view>
			<view>到账时间：</view>
		    <view>快捷支付为即时到账，银行卡转账和扫码支付到账预计1-10分钟之内。</view>
			<view>充值凭证:</view>
			<view>充值凭证提交超过充值时间，请联系客服并在隔天重新提交。</view>
			<view>未到账处理：</view>
		    <view>用户充值如若长时间未到账，请联系客服处理。</view>
		</view>			
<!-- 		<view class="recharge_banner margin-top-lg" v-if="carouselList.length > 0">
			<swiper class="screen-swiper square-dot" circular="true" indicator-dots="true" autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item, index) in carouselList" :key="index" @click="navToAdvUrls(item)">
					<image :src="weburl + item.path" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				enableRecharge: !0,
				coin: "",
				userinfo: [],
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				minrecharge:0,
				maxrecharge:0,
				endtime:0,
				begintime:0,
				
			}
		},
		onNavigationBarButtonTap(val) {
			uni.navigateTo({
				url: '/pages/help/detail?id=35',
			});	
		},
		onLoad: function (option) {
			this.helper.checkLogin();
			this.getData();
			this.loadInfo();
		},
		methods: {
			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{username:info.username,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					setTimeout(() => {
						uni.hideLoading();
						console.log(this.userinfo.auth)
						if(this.userinfo.auth == 0){
							uni.showModal({
								title: "提示",
								content: '帐户未实名，现在实名？',
								showCancel:false,
								confirmText: "现在实名",
								success:function(res){
									if(res.confirm){
										uni.navigateTo({
											url: "/pages/user/certification"
										})
									}
								}
							})
						}
					}, 300);
				})
			},
			loadInfo: function() {
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type=recharge','timestamp='+timestamp]);
				this.helper.req({
					api:"getRechargeInfo",
					timestamp:timestamp,
					data:{type:'recharge'},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					
					this.czinfo = res.data.data;
					this.rechargeday= this.czinfo.rechargeday
					this.begintime= this.czinfo.begintime
					this.endtime= this.czinfo.endtime
					this.minrecharge = this.czinfo.minrecharge
					this.maxrecharge = this.czinfo.maxrecharge
					uni.hideLoading();
				})
			},
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			inputChange: function(n) {
				var e = n.currentTarget.dataset.key;
				this[e] = n.detail.value,
				this.enableRecharge = !(parseFloat(n.detail.value) > 0)
			},
			changeCoin: function(money) {
				this.coin = money,
                this.enableRecharge = !1
			},
			beginRecharge: function() {
				this.enableRecharge = !0;
				let now = new Date();
				let today = new Date().getDay();
				const formattedTime = now.getHours().toString().padStart(2, '0') + ':' +
				                      now.getMinutes().toString().padStart(2, '0') + ':' +
				                      now.getSeconds().toString().padStart(2, '0');
				//console.log(formattedTime)
				let rechargeday = this.rechargeday.map(day => parseInt(day));
				if(formattedTime < this.begintime){
					uni.showToast({
						title:"抱歉！充值通道开放时间为"+this.begintime+"，请稍后再提交！",
						icon:"none",
						duration: 5000,					
					})
					setTimeout(() => {
					  uni.reLaunch({
					    url: '/pages/wallet/recharge'
					  });
					}, 5000);
					return;
				}
				if(formattedTime > this.endtime){
					uni.showToast({
						title:"抱歉！充值通道关闭时间为"+this.endtime+"，请明天再来吧！",
						icon:"none",
						duration: 5000,
					})
					setTimeout(() => {
					  uni.reLaunch({
					    url: '/pages/wallet/recharge'
					  });
					}, 5000);
					return;
				}				
				if(!rechargeday.includes(today)){
					uni.showToast({
						title:"当前充值通道已暂停，正常工作日开放！",
						icon:"none",
						duration: 5000,
					})
					return;
				}
				if(this.coin == ''){
					uni.showToast({
						title:"请输入充值金额",
						icon:"none"
					})
					return;
				}
				if(parseFloat(this.coin) < this.minrecharge){
					uni.showToast({
						title:"充值金额不能小于"+this.minrecharge+"元",
						icon:"none"
					})
					return;
				}				
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['coin='+this.coin,'timestamp='+timestamp,'token='+info.token]);
				this.helper.req({
					api:"doRecharge",
					timestamp:timestamp,
					data:{coin:this.coin,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					let orderid = res.data.data.orderid;
					uni.redirectTo({
						url: "/pages/wallet/check-out?orderid="+orderid
					})
				})
			},
		}
	}
</script>

<style lang="scss">
page {
    // background-image: url('@/static/images/person/center-bg.png');
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    // min-height: 200vw;
		background-color: #ddeafd;
		height:100%;
}

.rech_recode{
	width: 100%;
	height: 10vw;
	padding: 4vw 4vw 0;
	color:#353535;
	font-size: 14px;
	text-align: right;
}

	.tab-bar { 
		height: 30vw;
		margin: 4vw 5vw;
		position: relative;
		background: #fff;
		border-radius: 20rpx;
		.info_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: #72d1f9;
			opacity: 0.3;
			border-radius:10px;
		}
		
		.tab_item{
			color:#72d1f9;
			.title{
				color: #353535;
				padding:30rpx 0 0 60rpx;
			}
			.cu-form-group{
				background-color:transparent;
			}
		}
	}
	
	.recharge{
		width: 100%;
		//height: 20vw;
		//margin-top: 10vw;
		
		.cu-btn{
			width: 70vw;
			height: 10vw;
			line-height: 10vw;
			text-align: center;
			color: #fff;
			font-size: 16px;
			border-radius: 5vw;
			margin-left: 15vw;
			background: linear-gradient( 180deg, #50A7FF 0%, #3267FF 100%);
		}
	}

	.vip-card-box {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		height: 245upx;
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		padding: 0 20upx 24upx;
		margin: 0 20upx 0;
		line-height: 50upx;
		z-index: 10;
		view{
			color: #4188ff;
			text-align: center;
		}
		.money{
			color: #4188ff;
			padding-top: 70rpx;
			font-size: 45rpx;
			font-weight: bold;
		}
		.text{
			color: #353535;
		}
	}
	.text-price{
		margin-left: 20rpx;
		color: #4188ff;
	}
	input.text-xxlx{
		font-size: 50upx;
		padding-left: 10upx;
		color: #3267FF;
		
	}
	.screen-swiper{
		min-height: 300upx;
	}
	.footer-info {
		margin: 0 35rpx;
		background: #fff;
		border-radius: 15px;
		margin-bottom: .59rem;
		color: #353535;
		padding: 2.67vw;
		margin-top: 5vh;
	}	
</style>